<template>
	<div class="container">
		<div class="title">
			<!-- <el-button type="text" class="back" @click="cancel">返回</el-button> -->
			<h2>{{params.row.mc}}的课表</h2>
		</div>
        <i class="el-icon-close close-top" @click="cancel"></i>
	

		<!-- 数据表格展示区域 -->
        <el-table 
            :data="dataList" 
            stripe
             border
            align="center" 
            class="admin-table">

                
            
            <el-table-column 
                :prop="v.prop" 
                :label="v.label" 
                v-for="(v,index) in portTitleList" 
                align="center" 
                show-overflow-tooltip 
                v-if="v.hide != 0"
                :align="v.align || 'center'"
                :fixed="v.fixed"
                :formatter="v.formatter"
                :class-name="v.columnStyle"
                :width="v.width"
                :min-width="v.minWidth || '150'"
                :header-align="v.headerAlign || 'center'"
                >  
            </el-table-column>

            <el-table-column 
                label="操作" 
                width="200" 
                align="center"
                fixed="right">
                <template scope="scope">
                    <!-- <el-button size="small" type="text" @click="componentsFn(v.type)" v-for="v in portBntList">{{v.name}}</el-button> -->
                    <el-button size="small" type="text" @click="up(scope)">向上顺延</el-button>
                    <el-button size="small" type="text" @click="down(scope)">向下顺延</el-button>
                    <el-button size="small" type="text" @click="supplyCourse(scope)">代课</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog 
            title="提示"
            :modal-append-to-body="false"
            :visible.sync="dialogVisible"
            size="tiny">
            
            <el-form ref="form" :model="form" label-width="80px" class="add-class-form" label-position="left">
                <el-form-item label="教室名称" class="select-block">
                    <el-input disabled v-model="form.classroomName"></el-input>
                </el-form-item>
                <el-form-item label="选择老师" class="select-block">
                    <el-select v-model="form.teachers" placeholder="请选择老师" :style="{width:'100%'}">
                        <el-option :label="v.zwm" :value="v.id + ''" v-for="v in $store.state.teacherList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="代课描述" >
                    <el-input type="textarea" v-model="form.intro" :rows="3"></el-input>
                </el-form-item> 
            </el-form>
            <el-button type="info" class="submit" @click="submit">确认</el-button>
        </el-dialog>
	</div>
</template>

<script type="text/javascript">
	export default {
        props: ['params'],
		data () {
			return {
				isReplace: false,
                dialogVisible: false,


                teacherList: [],
                form: {
                    classroomName: '',
                    classroomID: '',
                    intro: '',
                    teachers: '',
                },

                dataList: [],  //表格数据 
                portTitleList: [
                    {
                        prop:'id',
                        label:'ID',
                        hide:0,
                        align:'center'
                    },
                    {
                        prop:'sj',
                        label:'日期',
                        hide:1,
                        align:'left',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'left'
                    },
                    {
                        prop:'week',
                        label:'周几',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {
                            // console.log(row)
                            if (row.week == 1) {
                                return '周一'
                            }else if(row.week == 2) {
                                return '周二'
                            }else if(row.week == 3) {
                                return '周三'
                            }else if(row.week == 4) {
                                return '周四'
                            }else if(row.week == 5) {
                                return '周五'
                            }else if(row.week == 6) {
                                return '周六'
                            }else if(row.week == 0) {
                                return '周日'
                            }else {
                                return ''
                            }
                        }
                    },
                    {
                        prop:'sjd',
                        label:'时间段',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    // {
                    //     prop:'zwm',
                    //     label:'老师',
                    //     hide:1,
                    //     align:'center',
                    //     fixed:false,
                    //     width:'',
                    //     minWidth:'',
                    //     headerAlign:'center'
                    // },
                    {
                        prop:'jsmc',
                        label:'教室',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'day',
                        label:'D次',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    }
                   
                ],
                portBntList: [//接口按钮列表
                    {
                        name:'向上顺延',
                        type:'up'
                    },
                    {
                        name:'向下顺延',
                        type:'down'
                    },
                    {
                        name:'代课',
                        type:'replace'
                    }
                ],

			}
		},
        created () {
            console.log(this.params);
            this.getCourseList();

            this.$store.dispatch('getTeacherList');
        },
		methods: {
			cancel () {
				this.$emit('close',{type:'course',cancel:true})
			},

            submit () {
                console.log(this.form.teachers)
                this.dialogVisible = false;
                this.axios.get(this.$store.state.api + 'dk/add', {
                    params: {
                        id: this.form.classroomID,
                        dklsid: this.form.teachers,
                        ms: this.form.intro
                    }
                }).then ( res => {
                    console.log(res)
                }).catch( res => {
                    console.log(res)
                })
            },

            up (scope) {
                this.axios.get(this.$store.state.api + 'pk/up', {
                    params: {
                        id: scope.row.id
                    }
                 }).then( res => {
                    console.log(res)
                    if (res.data.code == 1) {
                        this.getCourseList()
                    }
                 }).catch( res => {
                    console.log(res)
                 })
            },

            down (scope) {
                 this.axios.get(this.$store.state.api + 'pk/down', {
                    params: {
                        id: scope.row.id
                    }
                 }).then( res => {
                    console.log(res)
                    if (res.data.code == 1) {
                        this.getCourseList()
                    }
                 }).catch( res => {
                    console.log(res)
                 })
            },

            supplyCourse(scope) {
                console.log(scope)
                this.dialogVisible = true;
                this.form.classroomName = scope.row.jsmc;
                this.form.classroomID = scope.row.id
            },

            getCourseList () {
                this.$store.state.loading = true;
                this.axios.get(this.$store.state.api + 'pk/bjkb_list', {
                    params: {
                        bjid: this.params.row.id
                    }
                }).then ( res => {
                    console.log(res)
                    this.$store.state.loading = false;
                    this.dataList = res.data.data.list;
                }).catch( res => {
                    console.log(res);
                    this.$store.dispatch('showAlert',res.data.msg);
                    this.$store.state.loading = false;
                })
            },

            componentsFn (type) {
                if (type == "replace") {
                    this.isReplace = true;
                }
            },
            close (bol) {
                // console.log(bol)
                if (bol) {
                    this.isReplace = false;
                }
            }
		}
	}
</script>

<style lang="less" scoped>
	.title {
		text-align: center;
		h2 {
			line-height: 50px;
			font-size:25px;
			text-align: center;
			display: inline-block;
		}
		.back {
			float: left;
		}
	}

    .submit {
        width: 120px;
        display: block;
        margin:0 auto;
    }
</style>